<template>
<van-tabbar v-model="active">
  <van-tabbar-item to="/">
    <span>掌上警务数据</span>
    <template #icon="props">
      <img style="width: 20px;" :src="props.active ? icon_1.active : icon_1.inactive" />
    </template>
  </van-tabbar-item>
  <van-tabbar-item to="/people">
    <span>人口管理数据</span>
    <template #icon="props">
      <img style="width: 20px;" :src="props.active ? icon_2.active : icon_2.inactive" />
    </template>
  </van-tabbar-item>
</van-tabbar>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    activeTab: Number
  },

  data() {
    return {
      active: this.activeTab,
      icon_1: {
        active: require('../assets/images/tabbar/tab_1_active.png'),
        inactive: require('../assets/images/tabbar/tab_1.png')
      },
      icon_2: {
        active: require('../assets/images/tabbar/tab_2_active.png'),
        inactive: require('../assets/images/tabbar/tab_2.png')
      }
    }
  }
}
</script>

<style scoped>
.van-tabbar {
  box-shadow: 0 5px 40px 4px #EFEFEF;
}
</style>
